<template>
  <div class="collect">
    <div class="coll-top">
      <p class="my-coll">我的收藏</p>
      <p class="all" @click="allFn()">查看全部></p>
    </div>
    <div class="coll-box">
      <div class="coll-item" v-for="(item, id) in CollList" :key="id">
        <img :src="item.img" alt="" />
        <p class="names">{{ item.name }}</p>
        <p class="spans">{{ item.text }}</p>
        <p class="price">{{ item.price }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyCollect",
  data() {
    return {
      // 收藏
      CollList: [
        {
          img: "http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/clothes_goods_6.jpg",
          name: "委海素万单系工百清何机验很精拉转支",
          text: "习切大极连江",
          price: "¥188.25",
        },
        {
          img: "http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/clothes_goods_3.jpg",
          name: "加适气它书增命复转选保直满效导",
          text: "育种步角力将书书",
          price: "¥100.85",
        },
        {
          img: "http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/clothes_goods_7.jpg",
          name: "化构按发候手想少形东住",
          text: "又说文角听长心天",
          price: "¥133.41",
        },
        {
          img: "http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/clothes_goods_4.jpg",
          name: "动增走术值革团石音油表步自备切人步品增",
          text: "实党需火",
          price: "¥144.32",
        },
      ],
    };
  },
  methods:{
    allFn(){
      this.$router.push('/')
    }
  }
};
</script>

<style lang="scss" scoped>
.collect {
  width: 100%;
  height: 400px;
  background: white;
  margin-top: 30px;
  .coll-top {
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #e4e4e4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .my-coll {
      font-size: 22px;
      margin-left: 15px;
    }
    .all {
      font-size: 16px;
      color: #999999;
      margin-right: 15px;
    }
  }
  .coll-box {
    display: flex;
    justify-content: space-around;
    .coll-item {
      width: 200px;
      height: 280px;
      margin-top: 40px;
      text-align: center;
      transition: all 0.6s;
      img {
        width: 160px;
        height: 160px;
        margin-top: 10px;
      }
      .names {
        font-size: 14px;
        width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 10px;
        margin-left: 20px;
      }
      .spans {
        color: #999;
        height: 29px;
        font-size: 14px;
        margin-top: 10px;
      }
      .price {
        color: #cf4444;
        font-size: 20px;
      }
    }
    .coll-item:hover{
       transform:scale(1.1);
       box-shadow: 0px 0px 5px rgba(0,0,0,.5);
    }
  }
}
</style>